<template>
    <div class="app-container">
        <div class="filter-container">
            IP：<el-input style="width:150px" size="mini" v-model="listQuery.ip" clearable placeholder="请输入IP地址"></el-input>
            渠道商：<el-select
                size="mini"
                v-model="listQuery.channelId"
                remote
                :remote-method="getChannels"
                filterable
                clearable
                placeholder="请选择渠道商">
                <el-option
                        v-for="item in channels"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id">
                </el-option>
            </el-select>
            渠道号：<el-select
                size="mini"
                v-model="listQuery.channelItemId"
                remote
                :remote-method="getItems"
                filterable
                clearable
                placeholder="请选择渠道号">
            <el-option
                    v-for="item in items"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
            </el-option>
             </el-select>
            时间：<el-time-picker
                    clearable
                    size="mini"
                    is-range
                    value-format="HH:mm:ss"
                    v-model="timeRange"
                    range-separator="至"
                    start-placeholder="开始时间"
                    end-placeholder="结束时间"
                    placeholder="选择时间范围">
            </el-time-picker>
            <el-button v-waves class="filter-item" size="mini" type="primary" icon="el-icon-search"
                       @click="handleFilter">
                搜 索
            </el-button>
        </div>
        <el-table
                v-loading="listLoading"
                :data="list"
                border
                fit
                highlight-current-row
                style="width: 100%;"
        >
            <el-table-column label="#" type="index" prop="index" align="center" width="80">
            </el-table-column>
            <el-table-column label="当前日期" prop="currentDate" align="center">
                <template slot-scope="{row}">
                    <span>{{ row.currentDate }}</span>
                </template>
            </el-table-column>
            <el-table-column label="渠道商" prop="channelName" align="center">
                <template slot-scope="{row}">
                    <span>{{ row.channelName }}</span>
                </template>
            </el-table-column>
            <el-table-column label="渠道号" prop="itemName" align="center">
                <template slot-scope="{row}">
                    <span>{{ row.itemName }}</span>
                </template>
            </el-table-column>
            <el-table-column label="地区" prop="district" align="center">
                <template slot-scope="{row}">
                    <span>{{ row.district }}</span>
                </template>
            </el-table-column>
            <el-table-column label="ip" prop="ip" align="center">
                <template slot-scope="{row}">
                    <span>{{ row.ip }}</span>
                </template>
            </el-table-column>
            <el-table-column label="pv" prop="pv" align="center">
                <template slot-scope="{row}">
                    <span>{{ row.pv }}</span>
                </template>
            </el-table-column>
            <el-table-column label="uv" prop="uv" align="center">
                <template slot-scope="{row}">
                    <span>{{ row.uv }}</span>
                </template>
            </el-table-column>
            <el-table-column label="注册数" prop="regCount" align="center">
                <template slot-scope="{row}">
                    <span>{{ row.regCount }}</span>
                    <el-popover
                            placement="top"
                            width="200"
                            trigger="hover">
                        <span>{{ row.phoneList | appendPhone }}</span>
                        <i class="el-icon-warning" slot="reference"></i>
                    </el-popover>
                </template>
            </el-table-column>
            <el-table-column label="是否登录" prop="isLogin" align="center">
                <template slot-scope="{row}">
                    <span>{{ row.isLogin | isLogin }}</span>
                </template>
            </el-table-column>

            <el-table-column label="操作" align="center" width="300" class-name="small-padding fixed-width">
                <template slot-scope="{row,$index}">
                    <el-button type="primary" size="mini" @click="handleDetail(row)">
                        明 细
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-dialog :title="访问明细" :visible.sync="dialogFormVisible">

            <el-table
                    v-loading="listLoading"
                    :data="details"
                    border
                    fit
                    highlight-current-row
                    style="width: 100%;"
            >
                <el-table-column label="id" prop="id" align="center" width="80">
                    <template slot-scope="{row}">
                        <span>{{ row.id }}</span>
                    </template>
                </el-table-column>

                <el-table-column label="渠道商" prop="channelName" align="center">
                    <template slot-scope="{row}">
                        <span>{{ row.channelName }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="渠道号" prop="itemName" align="center">
                    <template slot-scope="{row}">
                        <span>{{ row.itemName }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="ip地址" prop="ip" align="center">
                    <template slot-scope="{row}">
                        <span>{{ row.ip }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="设备" prop="deviceName" align="center">
                    <template slot-scope="{row}">
                        <span>{{ row.deviceName }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="user-agent" prop="ua" align="center">
                    <template slot-scope="{row}">
                        <span>{{ row.ua | uaSplit }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="访问时间" prop="visitTime" align="center">
                    <template slot-scope="{row}">
                        <span>{{ row.visitTime }}</span>
                    </template>
                </el-table-column>

            </el-table>

            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">
                    关 闭
                </el-button>
            </div>
            <pagination v-show="detailTotal>0" :total="detailTotal" :page.sync="listQuery.pageNo" :limit.sync="listQuery.limit" @pagination="getList" />
        </el-dialog>

        <pagination v-show="total>0" :total="total" :page.sync="listQuery.pageNo" :limit.sync="listQuery.limit" @pagination="getList" />
    </div>
</template>

<script>

    import { rtList, detail } from '@/api/report/rt'
    import { channelList, itemList } from '@/api/report/base'
    import Pagination from '@/components/Pagination'
    import waves from '@/directive/waves'

    export default {
        name: 'Rt',
        components: { Pagination },
        directives: { waves },

        data() {
            return {
                list: null,
                details: null,
                total: null,
                detailTotal: null,
                listLoading: true,
                channels:[],
                items:[],
                timeRange:[ '00:00:00', '23:59:59' ],
                listQuery: {
                    pageNo: 1,
                    pageSize: 20,
                    ip: null,
                    channelId: null,
                    channelItemId: null,
                    startDate: '',
                    endDate: ''
                },
                detailQuery: {
                  pageNo: 1,
                  pageSize: 20,
                  channelId: null,
                  itemId: null,
                  ip: null,
                },
                loading: false,
                dialogFormVisible: false,
                dialogStatus: '',
            }
        },
        created() {
            const that = this
            that.getList()
        },
        filters: {
            isLogin(isLogin) {
                if(isLogin) {
                    return '是'
                } else {
                    return '否'
                }
            },
            appendPhone(phoneList) {
                let appendPhone = "";
                for (let i = 0; i < phoneList.length; i++) {
                    if(i < phoneList.length - 1) {
                        appendPhone = appendPhone + phoneList[i] + ","
                    } else {
                        appendPhone = appendPhone + phoneList[i];
                    }
                }
                return appendPhone
            },
            uaSplit(ua) {
                return ua.substr(0,30) + "...";
            }
        },
        methods: {
            getChannels(query) {
                const that = this
                const { keyword }  = query
                channelList(keyword).then(response => {
                    that.channels = response.data
                })
            },
            getItems(query) {
                const that = this
                const { keyword } = query
                itemList(keyword).then(response => {
                    that.items = response.data
                })
            },
            handleFilter() {
                const that = this
                that.listQuery.pageNo = 1
                that.getList()
            },
            getList() {
                const that = this
                that.listLoading = true
                const { channelId, channelItemId,pageNo, pageSize, ip } = that.listQuery
                const startTime = that.timeRange != null ? that.timeRange[0] : null;
                const endTime = that.timeRange != null ? that.timeRange[1] : null;
                rtList({ channelId: channelId, channelItemId: channelItemId, startTime: startTime,
                    endTime: endTime, pageNo: pageNo, pageSize: pageSize, ip: ip }).then(response => {
                    that.list = response.data.dataList
                    that.total = response.data.total
                    setTimeout(() => {
                        this.listLoading = false
                    }, 1.5 * 1000)
                })
            },
            handleDetail(row) {
                const that = this
                that.dialogFormVisible = true;
                const { cid, ciid, ip } = row
                that.detailQuery.channelId = cid
                that.detailQuery.itemId = ciid
                that.detailQuery.ip = ip
                that.detailQuery.pageNo = 1
                that.getDetails()
            },
            getDetails() {
                const that = this
                that.listLoading = true
                detail(that.detailQuery).then(response => {
                    that.details = response.data.dataList
                    that.detailTotal = response.data.total
                    setTimeout(() => {
                        this.listLoading = false
                    }, 1.5 * 1000)
                })
            },
        }
    }
</script>

<style scoped>

</style>

